<template>
    <el-row class="tac">
        <el-menu
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            @select="handleSelect"
            >
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-s-fold" ref="Icon"></i>
                    <span>文章管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="addart">
                        <i class="el-icon-edit"></i>
                        <span>写文章</span>
                    </el-menu-item>
                    <el-menu-item index="artlist">
                        <i class="el-icon-notebook-1"></i>
                        <span>文章列表</span>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-menu-item index="category">
                <i class="el-icon-tickets"></i>
                <span slot="title">分类列表</span>
            </el-menu-item>

            <el-submenu index="3">
                <template slot="title">
                    <i class="el-icon-s-fold" ref="Icon"></i>
                    <span>动态管理</span>
                </template>
            </el-submenu>

            <el-submenu index="4">
                <template slot="title">
                    <i class="el-icon-s-fold" ref="Icon"></i>
                    <span>项目管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="addproject">
                        <i class="el-icon-edit"></i>
                        <span>新增项目</span>
                    </el-menu-item>
                    <el-menu-item index="prolist">
                        <i class="el-icon-notebook-1"></i>
                        <span>项目列表</span>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-menu-item index="comment">
                <i class="el-icon-s-comment"></i>
                <span slot="title">文章评论管理</span>
            </el-menu-item>

            <el-menu-item index="myecharts">
                <i class="el-icon-s-data"></i>
                <span slot="title">数据统计</span>
            </el-menu-item>
        </el-menu>
    </el-row>
</template>

<script>
export default {
    name: "Nav",
    methods: {
        handleOpen(){
            this.$refs.Icon.className='el-icon-s-unfold'
        },
        handleClose(){
            this.$refs.Icon.className='el-icon-s-fold'
        },
        handleSelect(index) {
            this.$router.push(`/admin/${index}`)
        }
    }
}
</script>